<template>
	<view>
		<!-- 状态栏占位符 隐藏导航条时使用
		<view class="status_bar"> </view>-->
		<view class="pd10_15  my-page">
			<view v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
				<view class="flex alcenter">
					<view class="member-face">
						<image class="face" :src="statics.defaultFace"></image>
					</view>
					<view class="ml15">
						<view class="ft16 cl-main">{{$t('Guest')}}</view>
						<view class="mt12 ft12 cl-notice">{{$t('Please login first')}}</view>
					</view>
				</view>
				<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>
			</view>
			<view v-else class="flex  space">
				<view class="flex alcenter" @click="tolink('/pages/set/grzl/grzl')">
					<view class="member-face">
						<image class="face" :src="avatar"></image>
						<image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image>
					</view>
					<view class="ml15">
						<view class="ft16 cl-main nickname">{{ userinfo.nickname || '' }}</view>
						<view class="mt12 ft12 cl-notice user_id">ID:{{ userinfo.user_id || '' }}</view>
					</view>
				</view>
				<view class="btn-mini opsetads" @click="tolink('/pages/set/set')">
					<zui-svg-icon width="45rpx" height="45rpx" icon="setting"></zui-svg-icon>
					<!-- <image mode="aspectFit" style="width: 100%; height: 100%;" :src="staticUrl + 'sz.png?v=1'"></image> -->
				</view>
			</view>
			<view style="width: 100%; height: 30upx;"></view>
			<home-vipcard :userinfo="userinfo"></home-vipcard>
			<view class="box mt18 pd10_15">
				<view class="flex space alcenter">
					<view class="alcenter account" @tap="tolink('/pages/client/integral/integrallog')">
						<text class="money ft14">{{userinfo.score}}</text>
						<view class="name ft12">{{$t('My score')}}</view>
					</view>
					<view class="alcenter account" v-if="iskq>0" @tap="tolink('/pages/fenxiao/moneylog')">
						<text class="money ft14">{{userinfo.money}}</text>
						<view class="name ft12">{{$t('My earnings')}}</view>
					</view>
					<view class="btn-recharge" @tap="tolink('/pages/client/integral/recharge')">
						<text class="ft12">{{$t('Recharge')}}</text>
					</view>
					<view class="btn-tixian" v-if="iskq>0" @tap="tolink('/pages/fenxiao/tx')">
						<text class="ft12">{{$t('Withdrawal')}}</text>
					</view>
				</view>
			</view>
			<view class="box fenxiao flex mt15" style="flex-direction: row;" v-if="iskq>0">
				<view @tap="tolink('/pages/fenxiao/index')" class="fxlink">
					<zui-svg-icon width="42rpx" height="42rpx" icon="coin"></zui-svg-icon>
					<text class="ft14">{{$t('fenxiao.share')}}</text>
				</view>
				<view @tap="tolink('/pages/fenxiao/mytuandui')" class="fxlink">
					<zui-svg-icon width="42rpx" height="42rpx" icon="users-more"></zui-svg-icon>
					<text class="ft14">{{$t('fenxiao.team')}}</text>
				</view>
				<view @tap="tolink('/pages/fenxiao/fxlog')" class="fxlink">
					<zui-svg-icon width="42rpx" height="42rpx" icon="filters"></zui-svg-icon>
					<text class="ft14">{{$t('fenxiao.orders')}}</text>
				</view>
				<view @tap="tolink('/pages/fenxiao/qrshare')" class="fxlink">
					<zui-svg-icon width="42rpx" height="42rpx" icon="send"></zui-svg-icon>
					<text class="ft14">{{$t('fenxiao.qrcode')}}</text>
				</view>
			</view>
			<view class="flex wrap space mt16 menu">
				<view v-for="(item,index) in memberMenus" :key="index" :class="index > 1 ? 'mt16': ''">
					<view :data-index="index" @click="memberLinkTo" class="box pd16_15 flex alcenter"
						style="width: 320rpx;">
						<image :src="item.image" style="width: 100rpx;height: 100rpx;"></image>
						<text class="ml10 ft14 ftw500 cl-main">{{item.langname}}</text>
					</view>
				</view>
			</view>
			<com-copyright></com-copyright>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				isBirthday: true,
				showBirthday: false,
				avatar: '',
				userinfo: {
					score: 0,
					money: 0
				},
				banners: [],
				vipLevel: 0,
				iskq: 0,
				uid: 0,
				staticUrl: this.$config.staticUrl,
				memberMenus: [],
			}
		},
		onLoad() {
			if (uni.getStorageSync("userinfo")) {
				this.uid = uni.getStorageSync("userinfo").id
				var avatar = uni.getStorageSync("userinfo").avatar
				if (avatar.indexOf("http") != -1) {
					this.avatar = avatar;
				} else {
					this.avatar = this.configs.webUrl + avatar;
				}
				uni.removeStorageSync('payid');
			}
			this.iskq = 1;
			// if(uni.getStorageSync("config").site.iskq){
			// 	this.iskq=uni.getStorageSync("config").site.iskq;
			// }
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('User center')
			});
			if (uni.getStorageSync("userinfo").token) {
				this.isLogin = true;
				this.ongrzlTap();
			} else {
				this.isLogin = false
				this.userinfo.isLogin = false
			}
			this.banners = uni.getStorageSync("config").banner
			this.getMenus();
		},
		methods: {
			async getMenus() {
				let data = {
					type: 2
				};
				let [err, res] = await this.$httpas.get('/api/index/navmenu', data);
				if (res.data.code === 1) {
					this.memberMenus = res.data.data
				}
			},
			tolink(url) {
				if (this.isLogin == false) {
					uni.showToast({
						title: this.$t('Please login first'),
						icon: "none"
					});
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			async ongrzlTap() {
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				let [err, res] = await this.$httpas.get('/api/user/index', data);
				if (res.data.code == 1) {
					let uinfo = res.data.data
					uinfo.isLogin = true
					this.userinfo = uinfo
					this.userinfo.score_name = uni.getStorageSync("config").site?.score_name;
					if (uinfo.avatar.indexOf("http") != -1) {
						this.avatar = uinfo.avatar;
					} else {
						this.avatar = this.configs.webUrl + uinfo.avatar;
					}
					uni.setStorage({ //缓存配置信息
						key: 'userinfo',
						data: res.data.data
					})
				} else {
					uni.clearStorage("userinfo");
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
					this.showLoginAct()
				}
			},
			memberLinkTo(e) {
				let index = parseInt(e.currentTarget.dataset.index);
				if (this.isLogin == false) {
					uni.showToast({
						title: this.$t('Please login first'),
						icon: "none"
					});
				} else {
					if (this.memberMenus[index].url != '') {
						uni.navigateTo({
							url: this.memberMenus[index].url
						})
					}
				}
			},
			showLoginAct() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-page {
		background-image: url('@/static/my-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;

		.nickname {
			font-family: Source Han Sans;
			font-size: 26rpx;
			font-weight: normal;
			line-height: normal;
			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
			color: #000000;
		}

		.user_id {
			font-family: Source Han Sans;
			font-size: 20rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: 0em;
			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
			color: #999999;
		}

		.opsetads {
			color: #000000;
			width: 70upx;
			line-height: 70upx;
			height: 70upx;
			text-align: center;
			border-radius: 100%;
			background-color: transparent;
		}

		.money {
			color: #FF6600;
			font-weight: 500;
		}

		.fenxiao {
			.ft14 {
				/* 自动布局子元素 */
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				font-feature-settings: "kern" on;
				color: #121212;
			}
		}
		.menu {
			
			.ft14 {
				font-family: Source Han Sans;
				font-size: 22rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				font-feature-settings: "kern" on;
				color: #3D3D3D;
			}
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg) skew(0deg) scale(1);
			-ms-transform: rotate(0deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(0deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(0deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(0deg) skew(0deg) scale(1);
		}

		100% {
			transform: rotate(360deg) skew(0deg) scale(1);
			-ms-transform: rotate(360deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(360deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(360deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(360deg) skew(0deg) scale(1);
		}
	}

	.member-face {
		position: relative;
	}

	.member-face .vip-level {
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -30rpx;
	}

	.member-face .face {
		width: 128rpx;
		height: 128rpx;
		border: 6rpx solid #FFFFFF;
		background: #FFFFFF;
		border-radius: 100rpx;
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(197, 202, 219, 0.3);
	}

	.miniapp-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #F2F2F2;
	}

	.account {
		// width: 160rpx;
		text-align: center;

		.money {
			padding: 10rpx;
		}

		.name {
			color: #020202;
		}
	}

	.btn-tixian {
		padding: 15rpx 20rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0ccd62;
		color: white;
	}

	.btn-recharge {
		padding: 15rpx 20rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		color: #FF6600;
		align-items: center;
		background-color: #FEF1E6;
	}

	.fxlink {
		width: 25%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
		.ft14 {
			margin-top: 12rpx;
			color: #121212;
		}
	}

	.fxicon {
		display: block;
	}
</style>